<script lang="ts" setup>
import {ref, watch} from 'vue'

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
    () => x.value + y.value,
    (sum) => {
      console.log(`sum of x + y is: ${sum}`)
    }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY], [oldX, oldY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
  console.log('oldx', oldX)
  console.log('oldy', oldY)
})
</script>
<template>
  <button @click="x++">x++ x={{ x }}</button>
  <button @click="y++">y++ y={{ y }}</button>
</template>
